<template>
  <div class="header-container">
    <!-- 左侧：Fold 图标按钮 -->
    <el-button type="text" class="fold-button" @click="changeCollapse()">
      <el-icon>
        <Fold />
      </el-icon>
    </el-button>

    <!-- 中间：自定义搜索框 -->
    <div class="custom-search">
      <i class="el-icon-search search-icon"></i>
      <input type="text" v-model="searchText" placeholder="请输入搜索内容" class="search-input" />
      <el-button type="primary" class="searching" size="normal" @click="doSearch" circle
        ><el-icon style="vertical-align: middle; font-size: 20px"><Search /></el-icon
      ></el-button>
    </div>

    <!-- 右侧：用户头像和设置按钮 -->
    <div class="right-section">
      <!-- 用户头像下拉菜单 -->
      <el-dropdown trigger="click" class="avatar-dropdown-container">
        <el-avatar class="avatar-dropdown" :src="userImg" :size="50"></el-avatar>
        <template #dropdown>
          <el-dropdown-menu class="user-dropdown-menu">
            <div class="user-dropdown-content">
              <el-avatar :src="userImg" :size="80"></el-avatar>
              <div class="user-info">
                <!-- 直接用 userStore.username/email -->
                <div class="user-name">{{ userStore.username || '未知用户' }}</div>
                <div class="user-email">{{ userStore.email || '未知邮箱' }}</div>
              </div>
            </div>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <!-- 设置按钮（无边框，只有图标） -->
      <el-dropdown trigger="click" class="settings-dropdown" @command="handleCommand">
        <el-button type="text" class="settings-button">
          <el-icon>
            <Setting />
          </el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu class="settings-menu">
            <el-dropdown-item command="edit">用户信息</el-dropdown-item>
            <el-dropdown-item command="settings">用户设置</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { Fold, Setting } from '@element-plus/icons-vue'
import { useAllDataStore } from '@/stores'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
const userStore = useUserStore()
const router = useRouter()

const defaultUserImg = ref('https://cube.elemecdn.com/0/88/03b0d39563f48251a9ed908f818141.png')
const searchText = ref('')
const ImgURL = ref(
  'https://upload-bbs.miyoushe.com/upload/2023/09/27/26454523/3ff0274b8a39b4c82f56034615cf7c7b_2534397800130338630.jpg',
)
const userImg = ref(ImgURL.value || defaultUserImg.value)

watch(ImgURL, (newValue) => {
  userImg.value = newValue || defaultUserImg.value
})

const changeCollapse = () => {
  const store = useAllDataStore()
  store.state.isCollapse = !store.state.isCollapse
}

const edit = () => {
  router.push('/user/info')
}
const logout = async () => {
  try {
    await userStore.logout()
    router.push('/login')
  } catch {
    router.push('/login')
  }
}
const settings = () => {
  router.push('/user/settings')
}

const handleCommand = (command: string) => {
  switch (command) {
    case 'edit':
      edit()
      break
    case 'settings':
      settings()
      break
    case 'logout':
      logout()
      break
  }
}

const doSearch = () => {
  if (searchText.value.trim()) {
    router.push({ path: '/search', query: { keyword: searchText.value.trim() } })
  }
}
</script>

<style scoped>
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  background-color: #fff;
  padding: 0 20px;
  border-bottom: #ffe8e8 1px solid;
}

/* 搜索框样式优化 */
.custom-search {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 20px;
  height: 40px;
  flex: 1;
  margin: 0 30px;
  min-width: 320px;
  max-width: 420px;
}
.custom-search .search-input {
  flex: 1;
  border: none;
  background-color: transparent;
  outline: none;
  font-size: 15px;
  padding: 0 10px 0 36px;
  height: 100%;
  color: #333;
}
.custom-search .search-icon {
  position: absolute;
  left: 12px;
  font-size: 18px;
  color: #d16053;
}

.custom-search .searching {
  color: #fff;
  background-color: #d16053;
  border: none;
}
/*搜索按钮样式 */
.searching:hover {
  background-color: #99483f;
}

/* 用户头像样式 */
.avatar-dropdown {
  cursor: pointer;
  border: 2px solid #000000;
  background-color: #fff;
  padding: 2px;
  border-radius: 50%;
  transition: border 0.2s;
}
.avatar-dropdown:hover {
  border: 2px solid #b50000;
}
.avatar-dropdown-container {
  margin-right: 20px;
}

/* 用户下拉菜单样式 */
.user-dropdown-menu {
  padding: 0;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(209, 96, 83, 0.08);
  width: 250px;
  height: 160px;
}
.user-dropdown-content {
  text-align: center;
  padding: 10px;
}
.user-dropdown-content .user-info {
  margin-top: 10px;
}
.user-dropdown-content .user-name {
  font-size: 20px;
  font-weight: bold;
  margin-top: 10px;
  color: #d16053;
}
.user-dropdown-content .user-email {
  font-size: 16px;
  color: #909399;
  margin-top: 6px;
}

/* Fold 图标按钮样式 */
.fold-button .el-icon {
  font-size: 30px;
  color: #000000;
  transition: color 0.3s ease;
}
.fold-button .el-icon:hover {
  color: #b50000;
}

/* 设置按钮样式 */
.settings-button .el-icon {
  font-size: 30px;
  color: #000000;
  transition: color 0.3s ease;
}
.settings-button .el-icon:hover {
  color: #b50000;
}

/* 右侧区域样式 */
.right-section {
  display: flex;
  align-items: center;
  margin: 0 10px;
}

/* 修改设置下拉菜单的 hover 样式 */
.settings-menu .el-dropdown-menu__item:hover {
  background-color: #f9e9e7 !important;
  color: #d16061 !important;
}
</style>
